<template>
  <div class="latest-news">
    <div class="latest-news-left">{{ pageData.lstnew && pageData.lstnew.title }}</div>
    <div class="latest-news-right">
      <div class="latest-news-right-desc">{{ newsInfo.newsAbstract }}</div>
      <div @click="goNewsPage" class="latest-news-right-btn">→</div>
    </div>
  </div>
</template>

<script setup name="LatestNews">
import {getModelData, getNewsLasted} from "@/api/model.js";
import {useRouter} from "vue-router";

const {proxy} = getCurrentInstance();

const router = useRouter();

const pageData = ref('');
const newsInfo = ref('');

const loadPageData = async () => {
  const language = proxy.getLanguage();
  const modelKey = 'newsLasted';
  // 获取数据
  const res = await getModelData(modelKey, language);
  if (res && res.code === 200) {
    // 判断是否有数据
    if (res.data) {
      pageData.value = JSON.parse(res.data);
    }
  }
}

const loadLastedNews = () => {
  const language = proxy.getLanguage();
  getNewsLasted(language).then(res => {
    if (res.code == 200) {
      newsInfo.value = res.data;
    }
  })
}

const goNewsPage = () => {
  if (newsInfo.value.newsId) {
    router.push({
      path: '/newsInfo',
      query: {
        newsId: newsInfo.value.newsId
      }
    });
  } else {
    router.push({
      path: '/news'
    });
  }
}

onBeforeMount(() => {
  loadPageData();
  loadLastedNews();
})

</script>

<style lang="scss" scoped>
.latest-news {
  width: 100%;
  height: 300px;
  background: linear-gradient(-65deg, #0777b7 75%, transparent 25%, transparent 75%, #004183 75%);
  display: flex;
  justify-content: space-between;

  &-left {
    line-height: 240px;
    text-align: right;
    width: 22%;
    font-size: 32px;
    color: #ffffff;
  }

  &-right {
    width: 75%;
    display: flex;
    align-items: center;
    font-size: 18px;
    color: #ffffff;

    &-desc {
      width: 50%;
    }

    &-btn {
      font-size: 30px;
      font-weight: 800;
      width: 40px;
      height: 40px;
      line-height: 30px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid #ffffff;
      margin-left: 40px;
      cursor: pointer;
    }
  }
}
</style>
